<template>
	<div class="device-ledger-page" style="padding: 20px;">
		<el-row :gutter="10" style="margin-bottom: 16px;">
			<el-col :span="4">
				<el-button type="primary" size="small" @click="openDialog()">新增设备</el-button>
				<el-button type="success" size="small" @click="exportExcel">导出台账</el-button>
			</el-col>
			<el-col :span="6">
				<el-input v-model="searchKeyword" size="small" placeholder="搜索名称/编号..." clearable />
			</el-col>
			<el-col :span="4">
				<el-select v-model="filterStatus" placeholder="筛选状态" size="small" clearable>
					<el-option label="正常" value="正常" />
					<el-option label="故障" value="故障" />
					<el-option label="备用" value="备用" />
				</el-select>
			</el-col>
		</el-row>

		<el-table :data="filteredDevices" border stripe>
			<el-table-column prop="name" label="设备名称" />
			<el-table-column prop="code" label="设备编号" />
			<el-table-column prop="type" label="设备类型" />
			<el-table-column prop="location" label="安装位置" />
			<el-table-column prop="status" label="状态">
				<template #default="{ row }">
					<el-tag :type="row.status === '正常' ? 'success' : row.status === '故障' ? 'danger' : 'info'">{{
						row.status }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="purchaseDate" label="购置日期" width="140" />
			<el-table-column label="操作" width="160">
				<template #default="{ $index }">
					<el-button type="primary" text @click="openDialog($index)">编辑</el-button>
					<el-button type="danger" text @click="deleteDevice($index)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog v-model="dialogVisible" :title="editingIndex === null ? '新增设备' : '编辑设备'" width="500px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="设备名称"><el-input v-model="form.name" /></el-form-item>
				<el-form-item label="设备编号"><el-input v-model="form.code" /></el-form-item>
				<el-form-item label="设备类型"><el-input v-model="form.type" /></el-form-item>
				<el-form-item label="安装位置"><el-input v-model="form.location" /></el-form-item>
				<el-form-item label="状态">
					<el-select v-model="form.status" placeholder="请选择">
						<el-option label="正常" value="正常" />
						<el-option label="故障" value="故障" />
						<el-option label="备用" value="备用" />
					</el-select>
				</el-form-item>
				<el-form-item label="购置日期">
					<el-date-picker v-model="form.purchaseDate" value-format="YYYY-MM-DD" style="width: 100%" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveDevice">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import * as XLSX from 'xlsx'

const searchKeyword = ref('')
const filterStatus = ref('')
const dialogVisible = ref(false)
const editingIndex = ref(null)

const deviceList = ref([
	{ name: "电梯-A", code: "EQ100", type: "燃气", location: "B栋3楼", status: "故障", purchaseDate: "2022-12-23" },
	{ name: "加湿器", code: "EQ101", type: "给排水", location: "B栋3楼", status: "备用", purchaseDate: "2020-08-09" },
	{ name: "电表", code: "EQ102", type: "给排水", location: "B栋3楼", status: "故障", purchaseDate: "2019-06-28" },
	{ name: "电梯-A", code: "EQ103", type: "给排水", location: "A栋1楼", status: "备用", purchaseDate: "2022-12-02" },
	{ name: "电梯-A", code: "EQ104", type: "控制设备", location: "B栋3楼", status: "故障", purchaseDate: "2021-09-20" },
	{ name: "加湿器", code: "EQ105", type: "HVAC", location: "A栋2楼", status: "故障", purchaseDate: "2022-10-28" },
	{ name: "摄像头", code: "EQ106", type: "给排水", location: "D栋5楼", status: "正常", purchaseDate: "2019-05-15" },
	{ name: "电表", code: "EQ107", type: "燃气", location: "A栋1楼", status: "正常", purchaseDate: "2022-12-16" },
	{ name: "水泵", code: "EQ108", type: "电气", location: "A栋2楼", status: "正常", purchaseDate: "2021-09-11" },
	{ name: "电梯-A", code: "EQ109", type: "电气", location: "C栋地下室", status: "备用", purchaseDate: "2022-06-18" },
	{ name: "电梯-A", code: "EQ110", type: "给排水", location: "A栋2楼", status: "故障", purchaseDate: "2019-07-03" },
	{ name: "水泵", code: "EQ111", type: "监控", location: "A栋2楼", status: "备用", purchaseDate: "2020-07-12" },
	{ name: "电表", code: "EQ112", type: "燃气", location: "B栋3楼", status: "故障", purchaseDate: "2022-10-01" },
	{ name: "新风系统", code: "EQ113", type: "控制设备", location: "B栋3楼", status: "备用", purchaseDate: "2022-07-04" },
	{ name: "摄像头", code: "EQ114", type: "电气", location: "A栋2楼", status: "正常", purchaseDate: "2019-08-30" }
])

const form = reactive({
	name: '',
	code: '',
	type: '',
	location: '',
	status: '正常',
	purchaseDate: ''
})

const filteredDevices = computed(() =>
	deviceList.value.filter(d =>
		(!searchKeyword.value || d.name.includes(searchKeyword.value) || d.code.includes(searchKeyword.value)) &&
		(!filterStatus.value || d.status === filterStatus.value)
	)
)

function openDialog(index = null) {
	if (index !== null) {
		Object.assign(form, deviceList.value[index])
	} else {
		Object.assign(form, { name: '', code: '', type: '', location: '', status: '正常', purchaseDate: '' })
	}
	editingIndex.value = index
	dialogVisible.value = true
}

function saveDevice() {
	const item = { ...form }
	if (editingIndex.value === null) {
		deviceList.value.push(item)
		ElMessage.success('设备新增成功')
	} else {
		deviceList.value[editingIndex.value] = item
		ElMessage.success('设备更新成功')
	}
	dialogVisible.value = false
}

function deleteDevice(index) {
	deviceList.value.splice(index, 1)
	ElMessage.success('已删除设备')
}

function exportExcel() {
	const rows = [['设备名称', '编号', '类型', '位置', '状态', '购置日期']]
	deviceList.value.forEach(d =>
		rows.push([d.name, d.code, d.type, d.location, d.status, d.purchaseDate])
	)
	const ws = XLSX.utils.aoa_to_sheet(rows)
	const wb = XLSX.utils.book_new()
	XLSX.utils.book_append_sheet(wb, ws, '设备台账')
	XLSX.writeFile(wb, '设备台账.xlsx')
}
</script>

<style scoped>
.device-ledger-page {
	max-width: 1200px;
	margin: auto;
}
</style>